<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/page_main.css">
    <link rel="stylesheet" href="./css/page_search.css">
    <link rel="stylesheet" href="./css/page_plugin.css">
    <link rel="stylesheet" href="./css/page_about.css">
    <link rel="stylesheet" href="./css/page_info.css">
    <link rel="stylesheet" href="./css/page_toc.css">
    <link rel="stylesheet" href="./css/page_content.css">
    <link rel="stylesheet" href="./css/page_setting.css">
    <link rel="stylesheet" href="./css/page_cache.css">
    <link rel="stylesheet" href="./css/dialog_layer.css">

</head>
<body>
    <div class="container">
        <div class="page main">
            <div class="view">
                <div class="head">
                    <div class="shelf_title_group">
                        <div class="btn selected"> 书架 </div>
                    </div>
                    <div class="btn search"> 🔍 搜索 </div>
                    <div class="btn setting"> ⚙️ 设置 </div>
                </div>
                <div class="body">
                    <div class="shelf">
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                        <div class="book btn"> <div class="name">书名</div></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="page search hide">
            <div class="view">
                <div class="head">
                    <div class="btn btn-back-page">🔙 返回</div>
                    <input type="text" name="" class="search-bar-input" >
                    <div class="btn btn-search">🔍 搜索</div>
                </div>
                <div class="body">
                    <div class="search-list">
                        <div class="item btn">null</div>
                    </div>
                </div>
                <div class="foot">
                    尚无搜索结果
                </div>
            </div>
        </div>
        <div class="page plugin hide">
            <div class="view">
                <div class="head">
                    <div class="btn btn-back-page">🔙 返回</div>
                    <div class="btn">插件管理器</div>
                    <div class="btn btn-add-plugin">⚙️ 新增</div>
                </div>
                <div class="body">
                    <div class="plugin_list">
                        <div class="item" url="http://www.xiaoshuwu.com"> 
                            <input class="checkbox selected" type="checkbox" name="" > <div class="name">插件名</div>
                            <div>启用?</div> <input type="checkbox" name="" > <div> | </div>
                            <div class="btn">编辑</div> 
                        </div>
                        <div class="item" url="http://www.xiaoshuwu.com"> 
                            <input class="checkbox selected" type="checkbox" name="" > <div class="name">插件名</div>
                            <div >启用?</div> <input type="checkbox" name="" > <div> | </div>
                            <div class="btn">编辑</div> 
                        </div>
                    </div>
                </div>
                <div class="foot">
                    <div class="btn"> <input type="checkbox" name="" id="sleect_all_plugins"> <label for="#sleect_all_plugins">全选</label> </div>
                    <div class="btn select_invert" > 反选 </div>
                    <div class="btn delete"> 删除选中 </div>
                    <!-- <div class="btn"> ⚙️ 设置 </div> -->
                </div>
            </div>
        </div>
        <div class="page about hide">
            <div class="view">
                <div class="head">
                    <div class="btn btn-back-page">🔙 返回</div>
                    <div class="btn">关于</div>
                    <div class="btn btn-share-application">🔗 分享</div>
                </div>
                <div class="body">
                    <div class="btn">软件介绍：这是一款使用Electron开发的开源阅读软件。</div>
                    <div class="btn">开发人员：sinan</div>
                    <div class="btn">更新日志：开发基本完成，可以使用了(version 0.1.6)</div>
                    <div class="btn">联系方式：无</div>
                    <div class="btn">开源地址：https://github.com/yincolor/reader-electron2</div>
                    <div class="btn">开源协议：第三版本GPL开源协议</div>
                    <div class="btn">额外声明：<br>（1）开发此工具仅为学习参考之目的，很难对其可用性、准确性做出任何承诺或保证。<br>（2）用户使用此工具请符合当地法律法规要求，不得使用此工具施行违法犯罪活动，作者不承担任何法律责任。<br>（3）此工具不会给作者带来任何收益，请不要为此工具付任何钱。</div>
                </div>
            </div>
        </div>
        <div class="page info hide">
            <div class="view">
                <div class="head">
                    <div class="btn btn-back-page">🔙 返回</div>
                    <div class="btn"> 书籍信息 </div>
                    <div class="btn delete-from-shelf"> 删除 </div>
                </div>
                <div class="body">
                    <div class="item"><span>名称：</span><span class="book_name">书籍名称</span></div>
                    <div class="item"><span>作者：</span><span class="book_author">作者名称</span></div>
                    <div class="item btn_line"><span>书源：</span><span class="source_name">书源名称</span><div class="btn change_source">更换书源</div></div>
                    <!-- <div class="item btn_line"><span>分组：</span><span>分组名称</span><div class="btn">设置分组</div></div> -->
                    <div class="item btn_line"><span>最新章节：</span><span class="book_latest_chapter">最新章节</span><div class="btn show_toc">查看目录</div></div>
                    <div class="item book_intro_container"><span>简介：</span><span class="book_intro">书籍简介</span></div>
                </div>
                <div class="foot">
                    <div class="btn add-shelf">放入书架</div>
                    <!-- <div class="btn download-book"> 缓存 </div> -->
                    <div class="btn read-book"> 阅读 </div>
                </div>
            </div>
        </div>
        <div class="page toc hide">
            <div class="view">
                <div class="head">
                    <div class="btn btn-back-page">🔙 返回</div>
                    <div class="btn">章节列表</div>
                    <div class="btn">  </div>
                </div>
                <div class="body">
                    <div class="btn"><span> 章节名称 1 </span><span>✔️</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>✔️</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>❌</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>❌</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>❌</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>❌</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>✔️</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>✔️</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>✔️</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>✔️</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>✔️</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>✔️</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>✔️</span></div>
                    <div class="btn"><span> 章节名称 1 </span><span>✔️</span></div>
                </div>
            </div>
        </div>
        <div class="page content hide">
            <div class="view">
                <div class="head hide">
                    <div class="btn btn-back-page">🔙 返回</div>
                    <div class="btn"> <div class="book-name">《都市之流氓老师》</div><div class="toc-name">第一张结</div></div>
                    <div class="btn"> </div>
                </div>
                <div class="body"><div class="text_content"></div></div>
                <div class="foot hide">
                    <div class="btn btn_prev_toc"> 上一章 </div>
                    <div class="btn btn_toc_page"> 目录 </div>
                    <!-- <div class="btn"> 界面 </div> -->
                    <!-- <div class="btn btn_setting"> 设置 </div> -->
                    <div class="btn btn_next_toc"> 下一章 </div>
                </div>
            </div>
        </div>
        <div class="page setting hide">
            <div class="view">
                <div class="head">
                    <div class="btn btn-back-page">🔙 返回</div>
                    <div class="btn">设置</div>
                    <div class="btn"></div>
                </div>
                <div class="body">
                    <div class="btn source-plugin">书源配置</div>
                    <!-- <div class="btn">替换净化</div> -->
                    <div class="btn cache">缓存数据</div>
                    <div class="btn add-local-book">添加本地</div>
                    <div class="btn dev-tools">开启调试窗口</div>
                    <div class="btn about">关于</div>
                </div>
            </div>
        </div>
        <!-- 缓存数据页面 -->
        <div class="page cache hide"> 
            <div class="view">
                <div class="head">
                    <div class="btn btn-back-page">🔙 返回</div>
                    <div>缓存数据页面</div>
                </div>
                <div class="body">
                    <div class= "cache-list">
                        <div class="cache-item">
                            <div>书名：《XXXXXXXXX》</div>
                            <div>网址：https://www.aaxzxx/asda/123</div>
                            <div>等待缓存：123 缓存完毕：41 </div>
                        </div>
                        <div class="cache-item">
                            <div>书名：《XXXXXXXXX》</div>
                            <div>网址：https://www.aaxzxx/asda/123</div>
                            <div>等待缓存：123 缓存完毕：41 </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="dialog-layer" class="dialog_layer" >
        <div class="dialog loading">
            <div class="text"> 初始化中, 请等待... <br> <span id="loading_process">0</span> </div>
        </div>
        <div class="dialog menu hide">
            <div class="btn">更新目录</div>
            <div class="btn">添加本地</div>
            <div class="btn">分组管理</div>
            <div class="btn">缓存导出</div>
            <div class="btn">书架布局</div>
        </div>
        <div class="dialog alert hide">
            <div class="text">这是一个Alert警报！！这是一个Alert警报！！</div>
            <div class="btn">确认</div>
        </div>
    </div>
</body>
<script_box>
    <!-- 第三方库 -->
    <script src="./js/jsstore.js"></script>
    <script src="./js/jsstore.worker.js"></script>
    <!-- 自定义脚本 基于jsstore的数据库对象 db -->
    <script src="./js/db.js"></script>
    <!-- 自定义脚本 全局 -->
    <script src="./js/global.js"></script>
    <!-- 自定义脚本 页面方法及事件绑定 -->
    <script src="./js/page_main.js"></script>
    <script src="./js/page_search.js"></script>
    <script src="./js/page_info.js"></script>
    <script src="./js/page_toc.js"></script>
    <script src="./js/page_content.js"></script>
    <script src="./js/page_setting.js"></script>
    <script src="./js/page_plugin.js"></script>
    <script src="./js/page_about.js"></script>
    <script src="./js/page_cache.js"></script>

    <script src="./js/dialog.js"></script>
    
    <script process>
        /** 流程管理，执行初始化数据库、页面等操作，在初始化结束后屏蔽loading弹窗，显示主页，让用户开始操作 */
        (async function processManager(){
            utils.log('INDEX.HTML', '执行初始化流程');
            //初始化数据库，获得全局变量 db
            document.getElementById('loading_process').innerText = '0%';
            utils.log('INDEX.HTML', '初始化数据库');
            await db.init();
            document.getElementById('loading_process').innerText = '初始化数据库<20%>';
            //初始化管理器
            utils.log('INDEX.HTML', '初始化书源管理器');
            await sourceManager.init();
            await downloadManager.init();
            document.getElementById('loading_process').innerText = '初始化管理器<40%>';
            //初始化页面
            utils.log('INDEX.HTML', '执行各个页面init方法');
            await utils.initPage();
            // 初始化结束，关闭loading dialog的遮挡
            utils.log('INDEX.HTML', '初始化流程完毕');
            utils.hideDialogLayer();
            local.sendrendererInitEndMsg();
        })();
        
    </script>

</script_box>

</html>